<template>
    <div class="layoutAssist cu-flex">
        <!-- <el-button @click="zoomIn">放大</el-button>
         <el-button @click="zoomOut">缩小</el-button>
   <span>x= {{mousePoint[0]}} y= {{mousePoint[1]}}</span>-->
        <div class="cu-flex-average" style="max-height: 45%;">
            <PanelView title="疫情每日情況" bgClass="cmp-panel-cnt--bger" >
                <bh-every-count></bh-every-count>
            </PanelView>
        </div>
        <div class="cu-flex-average" style="margin-top:5px;margin-bottom: -5px">
            <PanelView title="近7日病患数量走势" bgClass="cmp-panel-cnt--bg" >
                <WsyjDiseaseTrend></WsyjDiseaseTrend>
            </PanelView>
        </div>
        <div class="cu-flex-average">
            <PanelView title="区域分布" bgClass="cmp-panel-cnt--bg" >
                <WsyjPatientDistribution></WsyjPatientDistribution>
            </PanelView>
        </div>

    </div>
</template>
<script lang="ts">
    import {Component, Vue, Prop} from 'vue-property-decorator';
    import PanelView from '@/components/common/panel/PanelView.vue';
    import BhEveryCount from '@/components/feature/BhfbModule/BhEveryCount.vue';
    import WsyjDiseaseTrend from '@/components/common/WsyjDiseaseTrend.vue';
    import WsyjPatientDistribution from "@/components/common/WsyjPatientDistribution.vue";

    @Component({
        name: 'BhfbAssist',
        components: {
            PanelView,
            BhEveryCount,
            WsyjDiseaseTrend,
            WsyjPatientDistribution
        }
    })
    export default class BhfbAssist extends Vue {

        get mousePoint() {
            return this.$store.state[('mapModule' as any)].mousePoint;
        }

        private zoomIn() {
            this.$store.dispatch('mapModule/zoomUpdate', 1);
        }

        private zoomOut() {
            this.$store.dispatch('mapModule/zoomUpdate', -1);
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../../assets/css/LayoutAssist.less');

</style>
